<template>
  <div class="f_box">
    <el-row class="top_row">
      <!-- <el-col :push="17">
        <el-button @click="add_site" size="mini" type="primary">添加站点</el-button>
        <el-button size="mini" type="success">&nbsp; 编 &nbsp; 辑 &nbsp;</el-button>
        <el-button size="mini" type="danger">&nbsp; 删 &nbsp; 除 &nbsp;</el-button>
      </el-col>-->
    </el-row>
    <el-table
      :header-cell-style="{background:'#007ee5',color:'#fff'}"
      :data="station"
      border
      style="width: 100%;height:100%;overflow:auto"
      highlight-current-row
      class="station_c_table"
    >
      <el-table-column type="expand" width="100%">
        <template slot-scope="info1">
          <el-row>
            <el-table
              size="mini"
              :header-cell-style="{background:'#fff',color:'#000',height:'0px'}"
              :data="info1.row.collectorSingles"
              :border="false"
              fit
              style="width: 100%"
              highlight-current-row
            >
              <el-table-column prop="name" label="子站"></el-table-column>
              <el-table-column prop="lat" label="纬度(气象站)"></el-table-column>
              <el-table-column prop="lng" label="经度(气象站)"></el-table-column>
              <el-table-column prop label="操作(气象站)">
                <template slot-scope="scope2">
                  <el-button
                    @click="up_weather(scope2.row)"
                    type="success"
                    size="mini"
                    icon="el-icon-edit"
                    circle
                  ></el-button>
                </template>
              </el-table-column>
            </el-table>
          </el-row>
        </template>
      </el-table-column>
      <el-table-column type="index" label="序号"></el-table-column>

      <!-- <template v-if="lock"> -->
      <el-table-column prop="station.name" label="站点" width></el-table-column>
      <el-table-column prop="station.lat" label="纬度(站点)"></el-table-column>
      <el-table-column prop="station.lng" label="经度(站点)"></el-table-column>
      <el-table-column prop="station.contact" label="联系人(站点)"></el-table-column>
      <el-table-column prop="station.mobile" label="手机号(站点)"></el-table-column>
      <el-table-column prop="station.fixed" label="座机号(站点)"></el-table-column>
      <el-table-column prop="station.createDate" label="创建时间(站点)" width="150px"></el-table-column>

      <!-- </template> -->
      <!-- <el-table-column prop="name" label="子站"></el-table-column>
      <el-table-column prop="lat" label="纬度(气象站)"></el-table-column>
      <el-table-column prop="lng" label="经度(气象站)"></el-table-column>-->
      <el-table-column prop label="操作">
        <template slot-scope="scope">
          <el-button
            @click="up_site(scope.row)"
            type="success"
            size="medium"
            icon="el-icon-edit"
            circle
          ></el-button>
        </template>
      </el-table-column>
    </el-table>

    <!-- 编辑气象站 =====================================================-->
    <el-dialog title="编辑站点" :visible.sync="dialogVisible_up" width="30%">
      <!-- <span>这是一段信息</span> -->
      <el-form ref="form" :model="form_up" label-width="80px">
        <el-form-item label-width="100px" label="名称(站点)">
          <el-input v-model="form_up.name"></el-input>
        </el-form-item>
        <el-form-item label-width="100px" label="纬度(站点)">
          <el-input v-model="form_up.lat"></el-input>
        </el-form-item>
        <el-form-item label-width="100px" label="经度(站点)">
          <el-input v-model="form_up.lng"></el-input>
        </el-form-item>
        <el-form-item label-width="100px" label="联系人(站点)">
          <el-input v-model="form_up.contact"></el-input>
        </el-form-item>
        <el-form-item label-width="100px" label="手机号(站点)">
          <el-input v-model="form_up.mobile"></el-input>
        </el-form-item>
        <el-form-item label-width="100px" label="座机号(站点)">
          <el-input v-model="form_up.fixed"></el-input>
        </el-form-item>

        <!-- ========================站点信息 -->
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible_up = false">取 消</el-button>
        <el-button type="primary" @click="up_date">确 定</el-button>
      </span>
    </el-dialog>
    <!-- 编辑气象站弹窗 -->
    <el-dialog title="编辑气象站" :visible.sync="dialogVisible_weather" width="30%">
      <el-form ref="form" :model="form_weather" label-width="80px">
        <el-form-item label-width="100px" label="纬度(气象站)">
          <el-input v-model="form_weather.lat"></el-input>
        </el-form-item>
        <el-form-item label-width="100px" label="经度(气象站)">
          <el-input v-model="form_weather.lng"></el-input>
        </el-form-item>
        <el-form-item label-width="100px" label="名称(气象站)">
          <el-input v-model="form_weather.name"></el-input>
        </el-form-item>

        <el-form-item label-width="100px" label="封面(气象站)">
          <el-upload
            class="avatar-uploader"
            action="https://www.raintec.cn/file/upload"
            :show-file-list="false"
            :on-change="up_change"
            :headers="headers"
          >
            <img
              v-if="form_weather.icon"
              :src="form_weather.icon"
              class="avatar"
              alt="封面未正常加载"
              title="点击切换封面"
            >
            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
          </el-upload>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible_weather = false">取 消</el-button>
        <el-button type="primary" @click="up_date_a">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import Qs from "qs";
export default {
  created() {
    this.one_data();
  },
  data() {
    return {
      img_lock: false,

      lock: true,
      // token
      headers: {
        token: window.sessionStorage.getItem("token")
      },
      // 编辑表单信息
      form_up: {},
      // 添加站点信息的from存放
      form: {},
      // 编辑弹出层
      dialogVisible_up: false,
      // 添加弹出层的开关
      dialogVisible: false,
      // 气象站集合
      qx_station: [],
      // 用户信息
      user_info: this.$store.state.user_info.data,
      // 站点信息
      station: [],
      tableData: [],
      // 用户选择的封面
      imgurl: "",
      // 气象站使用的编辑表单
      form_weather: {},
      // 气象站弹窗开关
      dialogVisible_weather: false
    };
  },
  methods: {
    // 视频转码
    // baiduMp4(mp4Url, imgUrl) {
    //   var player = cyberplayer("my-video").setup({
    //     width: "100%", // 宽度，也可以支持百分比(不过父元素宽度要有)
    //     height: "100%", // 高度，也可以支持百分比
    //     title: mp4Url.name, // 标题
    //     file: mp4Url.playUrl, // 播放地址
    //     // image: "../assets/img/云上田野logo1.png", // 预览图
    //     autostart: false, // 是否自动播放
    //     stretching: "uniform", // 拉伸设置
    //     repeat: true, // 是否重复播放
    //     volume: 100, // 音量
    //     controls: true, // controlbar是否显示
    //     starttime: 0, // 视频开始播放时间点(单位s)，如果不设置，则可以从上次播放时间点续播
    //     skin: {
    //       name: "bce", // 默认皮肤-bce，其他可选项有beelden, bekle, five, glow, roundster, seven, six, stormtrooper, vapor
    //       background: "transparent", // 背景色设置
    //       inactive: "#FFF", // 未激活时的颜色
    //       active: "#13cde2" // 悬浮或激活的严责
    //     },
    //     // logo: {
    //     //   // logo设置
    //     //   linktarget: "_blank",
    //     //   margin: 8,
    //     //   hide: false,
    //     //   position: "top-right", // 位置
    //     //   file: "../assets/img/云上田野logo1.png" // 图片地址
    //     // },
    //     ak: "b5103dcc9fc84957856a1085e4ddf0b7" // 公有云平台注册即可获得accessKey
    //   });
    // },

    // 循环排序
    // sort_m() {
    //   var arr = [];
    //   this.station.forEach((item, k) => {
    //     arr.push(k);
    //   });
    //   console.log(arr);

    //   return arr;
    // },
    // 选择站点
    station_select(a) {
      // console.log(a);
      console.log(this.form_up.sId);
    },
    // 下拉框变化
    up_change(a) {
      console.log(a);
      setTimeout(() => {
        
        if (a.response.status == 3) {
         return this.$message.error(a.response.msg)
        }
        this.imgurl = a.response.data.path;
        
        this.form_weather.icon = this.imgurl;
        this.img_lock = true;
      }, 1000);

      // console.log(a);
    },
    // 点击气象站弹出框的确认按钮(发送ajax)
    async up_date_a() {
      let { data: res } = await this.$http.put(
        "/collectorSingle/update",
        this.form_weather
      );
      if (res.status != 0) return this.$message.error("编辑失败");
      if (res.status == 0) this.$message.success("编辑成功");
      this.one_data();
      this.dialogVisible_weather = false;
    },
    // 点击气象站的编辑按钮
    up_weather(info) {
      this.form_weather = info;
      this.dialogVisible_weather = true;
      console.log(this.form_weather);
    },
    // 编辑站点完成后触发事件(站点确认按钮发送ajax)
    async up_date() {
      let { data: res } = await this.$http.put("/station/update", this.form_up);
      if (res.status != 0) return this.$message.error("编辑失败");
      if (res.status == 0) this.$message.success("编辑成功");

      this.one_data();
      this.dialogVisible_up = false;
    },
    // 编辑站点
    async up_site(info) {
      this.dialogVisible_up = true;
      this.form_up = info.station;
    },
    // 添加站点功能
    add_site() {
      this.dialogVisible = true;
    },
    async one_data() {
      // console.log(this.$store.state.user_info.data);
      // 超级管理员的内容
      if (this.$store.state.user_info.data.type == 1) {
        let { data: res2 } = await this.$http("/collectorSingle/list");
        this.qx_station = res2.datas;
        this.tableData = this.qx_station;
        let { data: res } = await this.$http("/station/list");
        this.station = res.datas;
        // 将父元素的信息隐藏
        this.lock = false;
        return;
      }

      let { data: res2 } = await this.$http(
        `/station/listStationsAndCollectorSingle/${this.user_info.id}`
      );
      this.station = res2.datas;

      return;
      // 在添加之前清空数组
      // this.qx_station = [];
      // // 循环站点
      // this.station.forEach(item => {
      //   // 每个站点下的存放气象站的数组，循环出来
      //   item.collectorSingles.forEach(item2 => {
      //     // 将该气象站上的站点名字绑定在对象上
      //     item2.f_station = item.station.name;
      //     // 将站点的id挂载到对象上
      //     item2.f_id = item.station.id;
      //     // 图片需要在循环之前引入进来，并且拼好路径
      //     item2.icon_i = require("../assets/img/line" + item2.flag + ".png");
      //     //   所属站点的经纬度
      //     item2.f_lat = item.station.lat;
      //     item2.f_lng = item.station.lng;
      //     // 将每一项加工完的气象站添加到数组里边
      //     // 站点联系人
      //     item2.f_contact = item.station.contact;
      //     // 手机号
      //     item2.f_mobile = item.station.mobile;
      //     // 座机号
      //     item2.f_fixed = item.station.fixed;
      //     // 创建时间
      //     item2.f_createDate = item.station.createDate;
      //     this.qx_station.push(item2);
      //   });
      // });
      // var obj = {
      //   f_station: "略略略"
      // };
      // this.tableData = this.qx_station;
      // this.tableData.push(obj);

      // console.log(this.tableData);
    }
  }
};
</script>

<style lang="less" scoped>
.station_c_table {
  padding-bottom: 60px;
}
.f_box {
  height: 100%;
}
.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.avatar-uploader .el-upload:hover {
  border-color: #409eff;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  line-height: 178px;
  text-align: center;
}
.avatar {
  width: 178px;
  height: 178px;
  display: block;
}
.top_row {
  // padding: 15px 0px;
  // background-color: pink;
  border-bottom: 3px dashed #666;
}
</style>